<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    style="width: 100%;"
  >
    <el-table-column align="center" type="index" label="序号" width="50" fixed />
    <el-table-column
      v-for="item in column"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      align="center"
      :min-width="item.width"
      show-overflow-tooltip
      fixed
    />
    <el-table-column
      v-for="(item, index) in tableHeader"
      :key="index"
      min-width="180"
      align="center"
    >
      <template slot="header">
        <el-tooltip
          effect="dark"
          placement="top"
        >
          <div slot="content">
            <span>子项目编码：{{ item.prjCode }}</span><br>
            <span>站址编码：{{ item.siteId }}</span><br>
            <span>站址名称：{{ item.siteName }}</span>
          </div>
          <div style="width: 100%">
            <div style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
              子项目编码：{{ item.prjCode }}
            </div>
            <div style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
              站址编码：{{ item.siteId }}
            </div>
            <div style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis">
              站址名称：{{ item.siteName }}
            </div>
            <div>当前绑定数量</div>
          </div>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        <div v-if="getItem(scope.$index,index)">
          <!--物资跳转进来，需判断是否跳转到APP-->
          <div v-if="keyCode === 'categoryCode'">
            <div v-if="isEdit && getItem(scope.$index,index).ifEdit === '1' && getItem(scope.$index,index).ifAppEdit === '1'">
              <div v-if="scope.row.assetsLabelList && scope.row.assetsLabelList.length > 0" @click="clickMaterialResource(getItem(scope.$index,index),scope.$index,index)">
                  <span v-if="Number(getItem(scope.$index,index).subBoundNum) > 0" style="color: #02a7f0;cursor: pointer">{{getItem(scope.$index, index).subBoundNum}}</span>
                  <span v-else style="color: #909399;cursor: pointer">选择绑定签码</span>
              </div>
              <el-input
                v-else
                v-model="getItem(scope.$index,index).subBoundNum"
                type="number"
                class="pms-wz-input pms-custom el-table-inline"
                @input="changeInputMaterial($event,scope.$index,index)"
              />
            </div>
            <div
              v-else-if="isEdit && getItem(scope.$index,index).ifAppEdit === '0'"
              style="cursor: pointer"
              @click="clickMaterial(getItem(scope.$index,index))"
            >
              {{ getItem(scope.$index, index).subBoundNum }}
            </div>
            <div v-else>{{ getItem(scope.$index, index).subBoundNum }}</div>
          </div>
          <div v-if="keyCode === 'serviceCode'">
            <el-input
              v-if="isEdit && getItem(scope.$index,index).isEdit === '1' && getItem(scope.$index,index).subBoundNum!==null"
              v-model="getItem(scope.$index,index).subBoundNum"
              type="number"
              class="pms-wz-input pms-custom el-table-inline"
              @input="changeInput($event,scope.$index,index)"
              @blur="changeBlur(scope.$index,index)"
              @focus="changeFocus(scope.$index,index)"
            />
            <el-tooltip
              v-else
              effect="dark"
              placement="top"
            >
              <div slot="content">
                <span>当前绑定金额：{{
                  getItem(scope.$index, index).subBoundNum * tableData[scope.$index].price
                }}</span>
              </div>
              <span>{{ getItem(scope.$index, index).subBoundNum }}</span>
            </el-tooltip>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { msgInfoEl } from '@/utils'
import { checkServiceBoundingEdit } from '@/api/acceptanceManagement/materialServiceBind'

export default {
    name: 'CustomTable',
    components: {},
    props: {
        // 父组件传递过来的表格数据
        tableData: {
            type: Array,
            default: () => []
        },
        // 父组件传递过来的表头数据
        column: {
            type: Array,
            default: () => []
        },
        // 父组件传递过来子项目的表头数据
        tableHeader: {
            type: Array,
            default: () => []
        },
        columnArr: {
            type: Array,
            default: () => []
        },
        keyCode: {
            type: String,
            default: ''
        },
        isEdit: {
            type: Boolean,
            default: true
        },
        prjParams: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            mergeArr: [],
            materialArr: [],
            keyCodeSub: 'osDetailId',
            prevNum: ''
        }
    },
    methods: {
        getItem(i, index) {
            if (this.tableData[i].singlePrjList) {
                return this.tableData[i].singlePrjList[index]
            }
        },
        // 数据需要合并数组
        getSpanArr(data) {
            let count = 0 // 需要合并行的起始位置
            this.mergeArr = []
            data.forEach((item, index) => {
                if (index === 0) {
                    this.mergeArr.push(1)
                } else {
                    if (item[this.keyCode] === data[index - 1][this.keyCode]) {
                        this.mergeArr[count] += 1
                        this.mergeArr.push(0)
                    } else {
                        count = index
                        this.mergeArr.push(1)
                    }
                }
            })
        },
        getMaterialArr(data) {
            let count = 0 // 需要合并行的起始位置
            this.materialArr = []
            data.forEach((item, index) => {
                if (index === 0) {
                    this.materialArr.push(1)
                } else {
                    if (item[this.keyCodeSub] === data[index - 1][this.keyCodeSub]) {
                        this.materialArr[count] += 1
                        this.materialArr.push(0)
                    } else {
                        count = index
                        this.materialArr.push(1)
                    }
                }
            })
            return this.materialArr;
        },
        getRowArr(arr, rowIndex) {
            if (arr[rowIndex]) {
                return [arr[rowIndex], 1]
            } else {
                return [0, 0]
            }
        },
        objectSpanMethod({ rowIndex, columnIndex }) {
            if (this.columnArr.includes(columnIndex) && this.mergeArr.length > 0) {
                return this.getRowArr(this.mergeArr, rowIndex)
            }
            if (this.keyCode === 'categoryCode' && [7, 8, 9].includes(columnIndex) && this.materialArr.length > 0) {
                return this.getRowArr(this.materialArr, rowIndex)
            }
        },
        // 物资点击后部分要弹窗
        clickMaterial(item) {
            if (item.ifAppEdit === '0') {
                msgInfoEl({
                    type: 'warning',
                    message: item.ifAppEditMes
                })
            }
        },
        clickMaterialResource(item, index,i) {
            this.$emit('selectResource', item, index,i)
        },
        // 相加避免精度问题
        numAdd(num1, num2) {
            let baseNum1, baseNum2
            try {
                baseNum1 = num1.toString().split('.')[1].length
            } catch (e) {
                baseNum1 = 0
            }
            try {
                baseNum2 = num2.toString().split('.')[1].length
            } catch (e) {
                baseNum2 = 0
            }
            const baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
            return (num1 * baseNum + num2 * baseNum) / baseNum
        },
        getBoundNum(index) {
            let sum = 0
            this.tableData[index].singlePrjList.forEach((item) => {
                if (item.subBoundNum) {
                    sum = this.numAdd(sum, item.subBoundNum)
                }
            })
            return sum
        },
        changeInputMaterial(e, index, i) {
            if (e < 0) {
                this.tableData[index].singlePrjList[i].subBoundNum = 0
            }
            this.tableData[index].boundNum = this.getBoundNum(index)
        },
        changeNum(index, i) {
            this.tableData[index].boundNum = this.getBoundNum(index)
            if (this.getBoundNum(index) === +this.tableData[index].shNum) {
                this.tableData[index].boundMoney = this.tableData[index].shMoney
            } else {
                this.tableData[index].boundMoney = (this.getBoundNum(index) * this.tableData[index].price).toFixed(2)
            }
            this.tableData[index].singlePrjList[i].subBoundMoney = (this.tableData[index].singlePrjList[i].subBoundNum * this.tableData[index].price).toFixed(2)
        },
        // 输入时候动态计算金额
        changeInput(e, index, i) {
            if (e < 0) {
                this.tableData[index].singlePrjList[i].subBoundNum = 0
            }
            this.changeNum(index, i)
            this.$emit('changeStatus', {
                status: true,
                prjCode: this.tableData[index].singlePrjList[i].prjCode,
                money: this.tableData[index].singlePrjList[i].subBoundMoney,
                index: index,
                i: i
            })
        },
        changeFocus(index, i) {
            this.$emit('changeStatus', {
                status: true,
                prjCode: this.tableData[index].singlePrjList[i].prjCode,
                money: this.tableData[index].singlePrjList[i].subBoundMoney,
                index: index,
                i: i
            })
            this.prevNum = this.tableData[index].singlePrjList[i].subBoundNum || ''
        },
        // 失焦之后不显示
        changeBlur(index, i) {
            this.$emit('changeStatus', {
                status: false,
                index: index,
                i: i
            })
            if (this.tableData[index].singlePrjList[i].subBoundNum) {
                const params = {
                    serviceCode: this.tableData[index].serviceCode,
                    num: this.tableData[index].singlePrjList[i].subBoundNum,
                    parentPrjId: this.prjParams.parentPrjId
                }
                checkServiceBoundingEdit(params).then((res) => {
                    if (!res.check) {
                        this.tableData[index].singlePrjList[i].subBoundNum = this.prevNum
                        this.changeNum(index, i)
                        msgInfoEl({
                            type: 'error',
                            message: res.msg
                        })
                    }
                })
            }
        }
    }

}
</script>

<style scoped lang="scss">

</style>
